<template>
  <IBizRow :class="classArr" :layout="modelData.layout">
    <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <IBizCol :layoutPos="modelData.layoutPos" :state="controller.state">
        <!-- #ifdef H5 -->
        <slot :name="panelItem.id"></slot>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN-->
        <slot name="{{panelItem.id}}"></slot>
        <!-- #endif  -->
      </IBizCol>
    </template>
  </IBizRow>
</template>

<script setup lang="ts">
import { IFlexLayoutPos, IPanelContainer } from '@ibiz/model-core'
import { computed, ref } from 'vue'
import { useNamespace } from '@/use'
import { GridContainerController } from './i-biz-grid-container.controller'

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: GridContainerController,
    required: true,
  },
})

// 获取命名空间和计算相关属性
const ns = useNamespace('grid-container')
const { id } = props.modelData

// 类名控制
const classArr = computed(() => {
  let result: Array<string | false> = [ns.b(), ns.m(id)]
  result = [
    ...result,
    ...props.controller.containerClass,
    ns.is('hidden', !props.controller.state.visible),
  ]
  return result
})

const layoutModel = computed(() => {
  return { ...props.modelData.layout, layout: 'TABLE_12COL' }
})

// 自适应列个数, 算一次记录下来，后续不用计算
const adaptCols: Ref<undefined | number> = ref(undefined)
// 自适应列默认占据的grow
const adaptGrow: Ref<number> = ref(12)

const convertLayoutPos = (layoutPos: IFlexLayoutPos, adaptGrow: number): IFlexLayoutPos => {
  const result = {
    ...layoutPos,
    layout: 'TABLE_12COL',
    colXS: layoutPos.grow || adaptGrow,
    colSM: layoutPos.grow || adaptGrow,
    colMD: layoutPos.grow || adaptGrow,
    colLG: layoutPos.grow || adaptGrow,
  }
  delete result.grow
  return result
}

// TODO 计算自适应列个数和默认占据的grow
</script>
<style lang="scss">
@import './i-biz-grid-container';
</style>
